<template>
	<u-popup v-model="show" mode="right" :closeable="true" width="80%" border-radius="14">
		<view class="mask" @tap="handleHide"></view>
		<view class="content">
			<view class="title">背景色</view>
			<view class="flex-row" style="margin-bottom: 20rpx">
				<view class="preview" :style="{ backgroundColor: pickerColor }"></view>
				<view class="value">
					<text v-if="pickerColor">颜色值：{{ pickerColor }}</text>
				</view>
				<view class="confirm" @tap="handleConfirm">确定</view>
			</view>
			<scroll-view scroll-y="true" style="height: 250px; width: 100%">
				<view class="color-list">
					<view
						class="item"
						v-for="(item, i) in colorArr"
						:key="i"
						:style="{ backgroundColor: item }"
						:data-color="item"
						:data-i="i"
						:class="{ active: pickIndex == i }"
						@tap="handlePicker"
					></view>
				</view>
			</scroll-view>
			<view class="action-box" v-if="hasBg">
				<view class="title">背景图</view>
				<view class="btn-box">
					<view class="confirm" @tap="choose">选择背景图</view>
					<view class="confirm del" v-if="imgSrc" @tap="del">删除</view>
				</view>
			</view>
			<view class="action-box action-box-s">
				<view>全屏覆盖</view>
				<switch :checked='checked' style="transform:scale(0.7)" @change="switchChange" />
			</view>
			<view class="img-box" v-if="hasBg">
				<image v-if="imgSrc" mode="aspectFit" :src="imgSrc"></image>
			</view>
		</view>
	</u-popup>
</template>

<script>
import uPopup from '../u-popup/u-popup.vue';
export default {
	name: 'sColor',
	components: {
		uPopup
	},
	props: {
		color: {
			type: String,
			default: '',
		},
		isShow: {
			type: Boolean,
			default: false,
		},
		hasBg: {
			type: Boolean,
			default: false,
		},
		dragBg:{
			type: Object,
			default(){
				return {
					bgColor: '#6739b6',
					color: '#6739b6',
					url: '',
					top: 0,
					left: 0,
					radius: 0,
					cover:false
				}
			},
		}
	},
	data() {
		return {
			imgSrc: '',
			show: false,
			checked: false,
			colorArr: ['#6739b6','pink', '#FFFFFF', 'transparent',
				'#7B7B7B', '#CE0000', '#FF0080', '#E800E8','#000',
				'#8E8E8E', '#EA0000', '#FF359A', '#FF00FF', '#9F35FF',
				'#9D9D9D', '#FF0000', '#FF60AF', '#FF44FF', '#B15BFF',
				'#ADADAD', '#FF2D2D', '#FF79BC', '#FF77FF', '#BE77FF',
				'#BEBEBE', '#FF5151', '#FF95CA', '#FF8EFF', '#CA8EFF',
				'#d0d0d0', '#ff7575', '#ffaad5', '#ffa6ff', '#d3a4ff',
				'#E0E0E0', '#FF9797', '#FFC1E0', '#FFBFFF', '#DCB5FF',
				'#F0F0F0', '#FFB5B5', '#FFD9EC', '#FFD0FF', '#E6CAFF',
				'#FCFCFC', '#FFD2D2', '#FFECF5', '#FFE6FF', '#F1E1FF',
				'#FFECEC', '#FFF7FB', '#FFF7FF', '#FAF4FF', '#921AFF',
				'#4A4AFF', '#0080FF', '#00E3E3', '#02F78E', '#00EC00',
				'#6A6AFF', '#2894FF', '#00FFFF', '#1AFD9C', '#28FF28',
				'#7D7DFF', '#46A3FF', '#4DFFFF', '#4EFEB3', '#53FF53',
				'#9393FF', '#66B3FF', '#80FFFF', '#7AFEC6', '#79FF79',
				'#AAAAFF', '#84C1FF', '#A6FFFF', '#96FED1', '#93FF93',
				'#B9B9FF', '#97CBFF', '#BBFFFF', '#ADFEDC', '#A6FFA6',
				'#CECEFF', '#ACD6FF', '#CAFFFF', '#C1FFE4', '#BBFFBB',
				'#DDDDFF', '#C4E1FF', '#D9FFFF', '#D7FFEE', '#CEFFCE',
				'#ECECFF', '#D2E9FF', '#ECFFFF', '#E8FFF5', '#DFFFDF',
				'#FBFBFF', '#ECF5FF', '#FDFFFF', '#FBFFFD', '#F0FFF0',
				'#9AFF02', '#E1E100', '#EAC100', '#FF9224', '#FF5809',
				'#A8FF24', '#F9F900', '#FFD306', '#FFA042', '#FF8040',
				'#B7FF4A', '#FFFF37', '#FFDC35', '#FFAF60', '#FF8F59',
				'#C2FF68', '#FFFF6F', '#FFE153', '#FFBB77', '#FF9D6F',
				'#CCFF80', '#FFFF93', '#FFE66F', '#FFC78E', '#FFAD86',
				'#D3FF93', '#FFFFAA', '#FFED97', '#FFD1A4', '#FFBD9D',
				'#DEFFAC', '#FFFFB9', '#FFF0AC', '#FFDCB9', '#FFCBB3',
				'#E8FFC4', '#FFFFCE', '#FFF4C1', '#FFE4CA', '#FFDAC8',
				'#EFFFD7', '#FFFFDF', '#FFF8D7', '#FFEEDD', '#FFE6D9',
				'#F5FFE8', '#FFFFF4', '#FFFCEC', '#FFFAF4', '#FFF3EE',
				'#804040', '#808040', '#408080', '#5A5AAD', '#8F4586',
				'#984B4B', '#949449', '#4F9D9D', '#7373B9', '#9F4D95',
				'#AD5A5A', '#A5A552', '#5CADAD', '#8080C0', '#AE57A4',
				'#B87070', '#AFAF61', '#6FB7B7', '#9999CC', '#B766AD',
				'#C48888', '#B9B973', '#81C0C0', '#A6A6D2', '#C07AB8',
				'#CF9E9E', '#C2C287', '#95CACA', '#B8B8DC', '#CA8EC2',
				'#D9B3B3', '#CDCD9A', '#A3D1D1', '#C7C7E2', '#D2A2CC',
				'#E1C4C4', '#D6D6AD', '#B3D9D9', '#D8D8EB', '#DAB1D5',
				'#EBD6D6', '#DEDEBE', '#C4E1E1', '#E6E6F2', '#E2C2DE',
				'#F2E6E6', '#E8E8D0', '#D1E9E9', '#F3F3FA', '#EBD3E8'
			],
			pickerColor: '#6739b6',
			pickIndex: 0
		};
	},
	watch:{
		color:{
			handler(val){
				if(val){
					let target = val;
					if(val =='#fff'||val =='#FFF'){
						target = '#FFFFFF'
					}
					this.colorArr.map((item,index)=>{
						if(target == item){
							this.pickIndex = index;
							this.pickerColor = item;
						}
					})
				}
			},
			immediate: true,
			deep:true
		},
		dragBg:{
			handler(val){
				if(val){
					let target = val.bgColor;
					if(val =='#fff'||val =='#FFF'){
						target = '#FFFFFF'
					}
					this.imgSrc = val.url;
					this.checked = val.cover;
					this.pickerColor = target;
					this.colorArr.map((item,index)=>{
						if(target == item){
							this.pickIndex = index;
							this.pickerColor = item;
						}
					})
				}
			},
			immediate: true,
			deep:true
		}
	},
	methods: {
		del() {
			this.imgSrc = '';
			this.show = false;
			this.$emit("confirm", {
				bgColor: this.pickerColor,
				color: this.pickerColor,
				url: this.imgSrc,
				cover: this.checked
			});
		},
		switchChange(e){
			let value = e.target.value
			this.checked = value;
			this.$emit("confirm", {
				bgColor: this.pickerColor,
				color: this.pickerColor,
				url: this.imgSrc,
				cover: this.checked
			});
		},
		choose() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					const path = res.tempFilePaths[0]
					let ext
					// #ifdef H5
					ext = res.tempFiles[0].name.split('.').pop()
					// #endif
					// #ifndef H5
					// 字节跳动小程序ios端选择文件会带query
					ext = res.tempFilePaths[0].split('?')[0].split('.').pop()
					// #endif
					const options = {
						filePath: path,
						cloudPath: Date.now() + '.' + ext
					}
					this.imgSrc = path;
					this.$emit("confirm", {
						bgColor: this.pickerColor,
						color: this.pickerColor,
						url: this.imgSrc,
						cover: this.checked
					});
				},
				fail: (err) => {
					console.log('<<<<yyds>>>>>', err);
				}
			})
		},
		handlePicker(e) {
			let data = e.currentTarget.dataset;
			this.pickerColor = data.color;
			this.pickIndex = data.i;
		},
		handleHide() {
			this.$emit("cancel", '');
		},
		handleConfirm() {
			// this.$emit("confirm",this.pickerColor);
			this.show = false;
			this.$emit("confirm", {
				bgColor: this.pickerColor,
				color: this.pickerColor,
				url: this.imgSrc,
				cover:this.checked
			});
		}
	},

}
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.content {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	z-index: 1001;
	height: 100%;
	padding: 20rpx 20rpx 10rpx 20rpx;
	font-size: 32rpx;
	box-sizing: border-box;
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.color-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.item {
		width: 60rpx;
		height: 60rpx;
		margin: 5rpx;
		box-sizing: border-box;
		border-radius: 3px;
		box-shadow: 0 0 2px #ccc;

		&.active {
			box-shadow: 0 0 2px #09f;
			transform: scale(1.05, 1.05);
		}
	}
}

.preview {
	width: 120rpx;
	height: 60rpx;
	border-radius: 10rpx;
	border: 1px dashed #ddd;
}

.value {
	margin: 0 40rpx;
	flex-grow: 1;
	font-size: 25rpx;
}

.confirm {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: $uni-color-primary;
	color: #fff;
	border-radius: 4px;
	letter-spacing: 3px;
	font-size: 27rpx;
}

.confirm:active {
	background-color: $uni-color-primary;
}

.title {
	margin: 0rpx 0 40rpx;
	font-size: 35rpx;
}

.action-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
	.confirm {
		padding: 0 15rpx;
		font-size: 27rpx;
	}

	.title {
		margin-top: 20rpx;
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.confirm {
			width: auto;
			text-align: center;
			padding: 0 20rpx;
			font-size: 27rpx;
		}

		.del {
			margin-left: 15rpx;
		}
	}
}
.action-box-s{
	margin-bottom: 20rpx;
}
.img-box {
	width: 100%;
	min-height: 200rpx;
	border: 1px dashed #ddd;
	text-align: center;
	border-radius: 10rpx;
}
</style>
